<template>
    <div>
        <div v-if="personalGuarantors && personalGuarantors.length>0">
            <p class="subTitle">个人担保</p>
            <el-table
                :data="personalGuarantors"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                <el-table-column
                    align="center"
                    prop="name"
                    label="姓名"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="idNumber"
                    label="身份证号"
                    min-width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="contactPhoneNumber"
                    label="联系电话"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="contactAddress"
                    label="联系地址"
                    min-width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="relationshipWithCustomers"
                    label="与客户关系"
                    min-width="120">
                </el-table-column>
            </el-table>
        </div>
        <div v-if="companyGuarantors && companyGuarantors.length>0">
            <p class="subTitle">企业担保</p>
            <el-table
                :data="companyGuarantors"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                <el-table-column
                    align="center"
                    prop="name"
                    label="企业名称"
                    min-width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="idNumber"
                    label="统一社会信用代码"
                    min-width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="contactAddress"
                    label="联系地址"
                    min-width="180" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="contacts"
                    label="联系人"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="contactPhoneNumber"
                    label="联系电话"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="relationshipWithCustomers"
                    label="与客户关系"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="email"
                    label="电子邮箱"
                    min-width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="fax"
                    label="传真"
                    min-width="120">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        guarantors: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            personalGuarantors: [],
            companyGuarantors:[]
        }
    },
    computed: {},
    watch: {
        guarantors: {
            handler(val) {
                if (val && val.length > 0) {
                    let personalGuarantors = val.filter((guarantor) => guarantor.typeOfGuarantor == 1)
                    let companyGuarantors = val.filter((guarantor) => guarantor.typeOfGuarantor == 2)
                    if (personalGuarantors && personalGuarantors.length > 0) {
                        this.personalGuarantors = personalGuarantors
                    }
                    if (companyGuarantors && companyGuarantors.length > 0) {
                        this.companyGuarantors = companyGuarantors
                    }
                }
            },
            immediate:true
        }
    },
    // 方法集合
    methods: {},
    // 生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
    },

}
</script>

<style lang="scss" scoped>
</style>
